<template>
  <div class="decision-analysis flex h-full bg-background text-foreground">
    <!-- Left side: Map -->
    <div class="w-2/3 relative">
      <div id="map" class="h-full w-full"></div>
      <div class="absolute bottom-4 left-4 bg-card text-card-foreground p-2 rounded shadow z-[1000]">
        <h3 class="font-bold mb-2">图例</h3>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-red-500 rounded-full mr-2"></span>
          <span>应急专家</span>
        </div>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-green-500 rounded-full mr-2"></span>
          <span>应急队伍</span>
        </div>
        <div class="flex items-center mb-1">
          <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
          <span>应急车辆</span>
        </div>
        <div class="flex items-center">
          <span class="w-4 h-4 bg-yellow-500 rounded-full mr-2"></span>
          <span>视频监控</span>
        </div>
      </div>
    </div>

    <!-- Right side: Information Panels -->
    <div class="w-1/3 bg-muted p-4 overflow-y-auto">
      <!-- Accident Simulation Analysis -->
      <div class="bg-card text-card-foreground rounded-lg shadow-md p-4 mb-4">
        <h2 class="text-lg font-bold mb-4">事故模拟分析</h2>
        <div class="flex space-x-4 mb-4">
          <div class="flex flex-col items-center">
            <div class="w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-white text-2xl mb-2">🔥</div>
            <span>火灾模型</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center text-white text-2xl mb-2">💥</div>
            <span>爆炸模型</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center text-white text-2xl mb-2">☁️</div>
            <span>泄露扩散模型</span>
          </div>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block mb-1">燃料类型:</label>
            <select v-model="simulationParams.fuelType" class="w-full border-input bg-background text-foreground rounded p-1">
              <option value="木材">木材</option>
              <!-- Add more options as needed -->
            </select>
          </div>
          <div>
            <label class="block mb-1">燃料总质量:</label>
            <input v-model="simulationParams.fuelMass" type="text" class="w-full border-input bg-background text-foreground rounded p-1" placeholder="40 kg/m²">
          </div>
          <div>
            <label class="block mb-1">发热量:</label>
            <input v-model="simulationParams.heatRelease" type="text" class="w-full border-input bg-background text-foreground rounded p-1" placeholder="44 MJ/kg">
          </div>
          <div>
            <label class="block mb-1">释放速率:</label>
            <input v-model="simulationParams.releaseRate" type="text" class="w-full border-input bg-background text-foreground rounded p-1" placeholder="0.008 kg/m²·s">
          </div>
          <div>
            <label class="block mb-1">初始火源面积:</label>
            <input v-model="simulationParams.initialArea" type="text" class="w-full border-input bg-background text-foreground rounded p-1" placeholder="10 m²">
          </div>
          <div>
            <label class="block mb-1">风速:</label>
            <input v-model="simulationParams.windSpeed" type="text" class="w-full border-input bg-background text-foreground rounded p-1" placeholder="5 m/s">
          </div>
          <div>
            <label class="block mb-1">湿度:</label>
            <input v-model="simulationParams.humidity" type="text" class="w-full border-input bg-background text-foreground rounded p-1" placeholder="45%">
          </div>
          <div>
            <label class="block mb-1">温度:</label>
            <input v-model="simulationParams.temperature" type="text" class="w-full border-input bg-background text-foreground rounded p-1" placeholder="30°C">
          </div>
        </div>
      </div>

      <!-- Real-time Accident Simulation Data -->
      <div class="bg-card text-card-foreground rounded-lg shadow-md p-4 mb-4">
        <h2 class="text-lg font-bold mb-4">事故模拟实时数据</h2>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block mb-1">事故发生时间:</label>
            <input v-model="accidentData.time" type="text" class="w-full border-input bg-background text-foreground rounded p-1" readonly>
          </div>
          <div>
            <label class="block mb-1">事故地点:</label>
            <input v-model="accidentData.location" type="text" class="w-full border-input bg-background text-foreground rounded p-1" readonly>
          </div>
          <div>
            <label class="block mb-1">事故类型:</label>
            <input v-model="accidentData.type" type="text" class="w-full border-input bg-background text-foreground rounded p-1" readonly>
          </div>
          <div>
            <label class="block mb-1">影响范围:</label>
            <input v-model="accidentData.impactArea" type="text" class="w-full border-input bg-background text-foreground rounded p-1" readonly>
          </div>
          <div>
            <label class="block mb-1">疏散建议:</label>
            <input v-model="accidentData.evacuationAdvice" type="text" class="w-full border-input bg-background text-foreground rounded p-1" readonly>
          </div>
          <div>
            <label class="block mb-1">事故原因:</label>
            <input v-model="accidentData.cause" type="text" class="w-full border-input bg-background text-foreground rounded p-1" readonly>
          </div>
        </div>
        <div class="mt-4">
          <h3 class="font-bold mb-2">救援进展:</h3>
          <ul class="list-disc pl-5">
            <li v-for="(update, index) in accidentData.rescueUpdates" :key="index">{{ update }}</li>
          </ul>
        </div>
      </div>

      <!-- Emergency Response Recommendations -->
      <div class="bg-card text-card-foreground rounded-lg shadow-md p-4">
        <h2 class="text-lg font-bold mb-4">应急响应建议</h2>
        <div>
          <h3 class="font-bold mb-2">人员调配:</h3>
          <ul class="list-disc pl-5">
            <li>前线灭火组: 30人 (抢险灭火和火场控制)</li>
            <li>疏散引导组: 20人 (引导员工安全疏散)</li>
            <li>医疗救护组: 10人 (现场伤员急救)</li>
          </ul>
        </div>
        <div>
          <h3 class="font-bold mb-2">设备分配:</h3>
          <ul class="list-disc pl-5">
            <li>消防水车: 3辆 (高效在火灾现场, 提供灭火水源)</li>
            <li>消防水枪: 5个 (精确定位灭火点使用)</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

const simulationParams = ref({
  fuelType: '木材',
  fuelMass: '40 kg/m²',
  heatRelease: '44 MJ/kg',
  releaseRate: '0.008 kg/m²·s',
  initialArea: '10 m²',
  windSpeed: '5 m/s',
  humidity: '45%',
  temperature: '30°C'
})

const accidentData = ref({
  time: '2024-04-01 12:00:00',
  location: '科技东路-九益生物有限公司',
  type: '火灾',
  impactArea: '伤亡 10 人',
  evacuationAdvice: '红色警报',
  cause: '正在调查',
  rescueUpdates: [
    '12:30:00 火势已基本得到控制',
    '12:20:00 消防车已到达现场',
    '12:10:00 救护车已到达现场'
  ]
})

let map = null

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (map) {
    map.remove()
  }
})

function initMap() {
  // 更新坐标为大荔县经济开发区
  map = L.map('map').setView([34.795, 109.942], 14)

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map)

  // 更新标记位置
  addMarker([34.795, 109.942], '应急指挥中心', 'red')
  addMarker([34.797, 109.945], '应急队伍', 'green')
  addMarker([34.793, 109.940], '视频监控', 'yellow')
}

function addMarker(position, title, color) {
  const marker = L.circleMarker(position, {
    radius: 8,
    fillColor: color,
    color: '#000',
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
  }).addTo(map)

  marker.bindPopup(title)
}
</script>

<style>
.decision-analysis {
  height: calc(100vh - 64px); /* 假设顶部导航栏高度为64px，根据实际情况调整 */
}

#map {
  height: 100%;
  width: 100%;
}
</style>
